<template>
	<view class="container">

		<!-- 主容器 -->
		<view class="main-container">
			<view class="">

			</view>
			<view class="title">
				健康才是最大的幸福
			</view>
			<!-- 标题 -->
			<view class="title">BMI 计算</view>

			<!-- 输入框：身高 -->
			<view class="input-group">
				<text class="label">身高 (cm)</text>
				<input type="number" placeholder="请输入身高" v-model="height" @input="validateInput" />
			</view>

			<!-- 输入框：体重 -->
			<view class="input-group">
				<text class="label">体重 (kg)</text>
				<input type="number" placeholder="请输入体重" v-model="weight" @input="validateInput" />
			</view>

			<!-- 错误提示 -->
			<view v-if="errorVisible" class="error-message">{{ errorMessage }}</view>

			<!-- 计算按钮 -->
			<button class="calc-button" @click="calculateBMI">计算 BMI</button>

			<!-- 结果展示 -->
			<view v-if="resultVisible" class="result">
				<text class="result-title">您的 BMI 值：</text>
				<text class="result-value">{{ bmi.toFixed(1) }}</text>
				<text class="result-suggestion">{{ suggestion }}</text>
			</view>

			<!-- BMI 公式说明 -->
			<view class="formula-info">
				<text class="formula-title">BMI 计算公式：</text>
				<text class="formula-content">BMI = 体重(kg) ÷ (身高(m) × 身高(m))</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	// 数据
	const height = ref(''); // 身高 (单位：cm)
	const weight = ref(''); // 体重 (单位：kg)
	const bmi = ref(0); // BMI 值
	const resultVisible = ref(false); // 是否显示结果
	const suggestion = ref(''); // 健康建议
	const errorVisible = ref(false); // 是否显示错误提示
	const errorMessage = ref(''); // 错误提示内容

	// 验证输入是否为数字
	const validateInput = () => {
		if (isNaN(height.value)) height.value = '';
		if (isNaN(weight.value)) weight.value = '';
	};

	// 计算 BMI
	const calculateBMI = () => {
		const h = parseFloat(height.value);
		const w = parseFloat(weight.value);

		if (!h || !w || h <= 0 || w <= 0) {
			errorMessage.value = '请输入有效的身高和体重';
			showErrorAnimation();
			return;
		}

		// 清除错误提示
		errorVisible.value = false;

		// 转换身高为米
		const heightInMeters = h / 100;

		// 计算 BMI
		bmi.value = w / (heightInMeters * heightInMeters);
		resultVisible.value = true;

		// 提供健康建议
		if (bmi.value < 18.5) {
			suggestion.value = '偏瘦，建议增加营养摄入';
		} else if (bmi.value >= 18.5 && bmi.value < 24) {
			suggestion.value = '正常范围，继续保持健康生活方式';
		} else if (bmi.value >= 24 && bmi.value < 28) {
			suggestion.value = '超重，建议适当运动和控制饮食';
		} else {
			suggestion.value = '肥胖，建议咨询医生并调整生活习惯';
		}
	};

	// 显示错误提示动画
	const showErrorAnimation = () => {
		errorVisible.value = true;
		setTimeout(() => {
			errorVisible.value = false;
		}, 3000); // 3秒后自动隐藏错误提示
	};
</script>

<style scoped>
	/* 全局容器 */
	.container {
		display: flex;
		justify-content: center;
		/* 水平居中 */
		align-items: center;
		/* 垂直居中 */
		min-height: 100vh;
		/* 占满整个视口高度 */
		background-color: #e8f5e9;
		/* 绿色背景 */
		padding: 20rpx;
	}

	/* 主容器 */
	.main-container {
		width: 100%;
		max-width: 600rpx;
		/* 设置最大宽度，避免过宽 */
		background: #ffffff;
		border-radius: 20rpx;
		box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.1);
		/* 添加阴影 */
		padding: 40rpx;
		text-align: center;
	}

	/* 标题 */
	.title {
		font-size: 48rpx;
		font-weight: bold;
		color: #2e7d32;
		/* 绿色主题色 */
		margin-bottom: 40rpx;
	}

	/* 输入框组 */
	.input-group {
		margin-bottom: 30rpx;
	}

	.label {
		font-size: 32rpx;
		color: #2e7d32;
		/* 绿色主题色 */
		margin-bottom: 10rpx;
		display: block;
		text-align: left;
	}

	input {
		width: 100%;
		height: 80rpx;
		background-color: #f9f9f9;
		border: 1px solid #c8e6c9;
		border-radius: 10rpx;
		padding: 0 20rpx;
		font-size: 28rpx;
		box-shadow: inset 0 2rpx 4rpx rgba(0, 0, 0, 0.05);
		/* 内阴影效果 */
		transition: all 0.3s ease;
		/* 平滑过渡效果 */
	}

	input:focus {
		border-color: #2e7d32;
		/* 聚焦时边框颜色变化 */
		box-shadow: 0 0 8rpx rgba(46, 125, 50, 0.2);
		/* 聚焦时添加发光效果 */
	}

	/* 错误提示 */
	.error-message {
		color: #d32f2f;
		/* 错误提示颜色 */
		font-size: 28rpx;
		margin-top: 20rpx;
		animation: shake 0.5s ease-in-out;
		/* 错误提示动画 */
	}

	/* 错误提示动画 */
	@keyframes shake {
		0% {
			transform: translateX(0);
		}

		25% {
			transform: translateX(-10rpx);
		}

		50% {
			transform: translateX(10rpx);
		}

		75% {
			transform: translateX(-10rpx);
		}

		100% {
			transform: translateX(0);
		}
	}

	/* 计算按钮 */
	.calc-button {
		width: 100%;
		height: 80rpx;
		background: linear-gradient(135deg, #2e7d32, #388e3c);
		/* 绿色渐变背景 */
		color: #ffffff;
		font-size: 32rpx;
		font-weight: bold;
		border-radius: 40rpx;
		/* 更大的圆角 */
		border: none;
		box-shadow: 0 6rpx 12rpx rgba(0, 0, 0, 0.1);
		/* 添加阴影 */
		transition: all 0.3s ease;
		/* 平滑过渡效果 */
	}

	.calc-button:active {
		transform: scale(0.98);
		/* 点击时缩小效果 */
		box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
		/* 减少阴影 */
	}

	/* 结果展示 */
	.result {
		margin-top: 40rpx;
		text-align: center;
	}

	.result-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #2e7d32;
		/* 绿色主题色 */
		margin-bottom: 20rpx;
	}

	.result-value {
		font-size: 48rpx;
		font-weight: bold;
		color: #2e7d32;
		/* 绿色主题色 */
		margin-bottom: 20rpx;
	}

	.result-suggestion {
		font-size: 32rpx;
		color: #666666;
	}

	/* BMI 公式说明 */
	.formula-info {
		margin-top: 40rpx;
		text-align: center;
		font-size: 28rpx;
		color: #666666;
		line-height: 1.5;
	}

	.formula-title {
		font-weight: bold;
		color: #2e7d32;
		/* 绿色主题色 */
	}

	.formula-content {
		display: block;
		margin-top: 10rpx;
	}
</style>